<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>开发者文档</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card class="box-card">
      <div>
        <el-row :gutter="20">
          <el-col :span="8">
            <!-- 搜索框 -->
            <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getList">
              <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-table
          :data="guidelineList"
          border
          stripe
        >
          <el-table-column type="index"></el-table-column>
          <el-table-column
            prop="title"
            label="文档标题"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="发布时间"
          >
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="更新时间"
          >
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <el-tooltip effect="dark" content="查看文档" placement="top" :enterable="false">
                <el-button type="primary" icon="el-icon-edit" size="mini"
                           @click="fillForm(scope.row);dialogVisible = true"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[5, 10, 15]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

        <el-dialog
          title="文档内容"
          :visible.sync="dialogVisible"
          width="80%">
          <h1>{{ form.title }}</h1>
          <div class="markdown-body">
            <VueMarkdown :source="form.content" v-highlight/>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">确定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-card>

  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'

export default {
  components: {
    VueMarkdown
  },
  data () {
    return {
      queryInfo: {
        pageNum: 1,
        pageSize: 5,
        query: ''
      },
      total: 0,
      guidelineList: [],
      dialogVisible: false,
      form: {
        content: '',
        title: ''
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      const { data: res } = await this.$http.get('/guideline', { params: this.queryInfo })
      if (res.code !== 200) {
        this.$message.error(res.message)
        return
      }
      console.log(res)
      this.guidelineList = res.data.guidelines.records
      this.total = res.data.guidelines.total
    },
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pageNum = newPage
      this.getList()
    },
    fillForm (info) {
      this.form.title = info.title
      this.form.content = info.content
    }
  }
}
</script>

<style lang="less" scoped>

</style>
